<template>
  <div class="work-calendar">
    <h3>工作日历</h3>
    <!-- 年 月 -->
    <div class="yORm">
      <!-- 年 -->
      <el-select v-model="year">
        <el-option
          v-for="item in yearArr"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <!-- 月 -->
      <el-select v-model="month">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar v-model="localDate"></el-calendar>
  </div>
</template>

<script>
export default {
  // localDate:接收外界传入的日期(可传，可不传)
  props: {
    localDate: {
      type: Date, // 约定传入的类型为日期
      default: new Date(), // 约定不传数据时日期为默认日期
    },
  },
  watch: {
    localDate: {
      handler: function (newv) {
        // 将日期转为时间
        var _time = new Date(newv);
        // 得到年
        this.year = _time.getFullYear();
        // 得到月
        this.month = _time.getMonth() + 1;
        // 得到年份的数组
        this.getYearArr();
      },
      immediate: true,
    },
  },
  data() {
    return {
      yearArr: [], // 年份的数组
      year: "", // 年
      month: "", // 月
    };
  },
  methods: {
    getYearArr() {
      // 年份的数组，在当前年份的基础向前加5年，向后加5年
      var _min = this.year - 5;
      var _max = this.year + 5;
      // 添加年份
      for (let i = _min; i <= _max; i++) {
        this.yearArr.push(i);
      }
    },
  },
};
</script>

<style lang="scss">
.work-calendar {
  h3 {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .el-calendar__header {
    display: none;
  }
  .yORm {
    text-align: right;
    .el-select {
      width: 100px;
    }
    input.el-input__inner {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
    }
    i.el-select__caret.el-input__icon.el-icon-arrow-up {
      line-height: 30px;
    }
  }
  .el-calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  td.current,
  td.prev,
  td.next {
    border: none !important;
  }
  .el-calendar-table {
    thead {
      th {
        font-weight: 700;
      }
      th:nth-child(6),
      th:nth-child(7) {
        color: #fa7c4d;
      }
    }
  }
}
</style>